<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/pc_master">
<div layout:fragment="content">
<link rel="stylesheet" href="/pc/css/pictureViewer.css">
<link rel="stylesheet" href="/pc/css/article/index.css">

    <!-- s: 导航 -->
    <div class="breadcrumb-wrap">
        <div class="layui-main clearfix">
            <div class="breadcrumb">
                <a href="/">首页</a> - 文章
            </div>
        </div>
    </div>
    <!-- e: 导航 -->

    <section class="section page-content">
        <div class="layui-main clearfix">
            <div class="section-left">

                <!-- s: 筛选 -->
                <div class="bcui-btnnav">
                    <a th:class="${cid eq null or cid==''?'item active':'item '}" href="/article">
                        全部
                    </a>
                    <a th:each="item:${categoryList}" th:class="${item.id eq cid ?'item active':'item'}" th:href="'/article?categoryId='+${item.id}" th:text="${item.name}">
                    </a>
                </div>
                <!-- e: 筛选 -->

                <!-- s: 列表 -->
                <div class="article-list">
                    <div class="article-item" th:each="item:${articleList}">

                        <div class="cover">
                            <a th:href="'/article/info/'+${item.id}">
                                <img th:attr="lay-src=${item.cover+'_200x200.jpg'}"
                                     th:src="${item.cover+'_200x200.jpg'}"
                                     th:alt="${item.title}">
                            </a>
                        </div>

                        <div class="content">
                            <h4 class="title">
                                <a th:href="'/article/info/'+${item.id}" th:text="${item.title}"></a>
                            </h4>
                            <p class="summary _text3" th:text="${item.summary}">
                            </p>
                            <p class="info">
                                发布时间：[[${#dates.format(item.createTime, 'yyyy-MM-dd HH:mm')}]]
                            </p>
                        </div>

                    </div>
                </div>
                <!-- e: 列表 -->

                <!-- s: 分页 -->
                <div class="pagination-wrap" th:utext="${page}">

                </div>
                <!-- e: 分页 -->

            </div>
            <div class="section-right">
                <!-- s: 脱单宝典 -->
                <div class="bcui-widget bcui-widget-article">
                    <h5 class="title">脱单宝典</h5>
                    <ul class="lists">
                        <li class="item _text" th:each="item:${article}">
                            <a th:href="'/article/info/'+${item.id}" th:text="${item.title}">
                            </a>
                        </li>

                    </ul>
                </div>
                <!-- e: 脱单宝典 -->

            </div>
        </div>
    </section>

</div>
<div layout:fragment="contentFooter" >
</div>
</html>